<template>
	<view class="content">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view style="width: 100%;display: flex;justify-content: space-between;align-items: center;padding: 0 36rpx 0 16rpx;box-sizing: border-box;">
			<view style="display: flex;justify-content: flex-start;align-items: center;">
				<view style="box-sizing: border-box;" @click="goBack">
					<view style="border: 2rpx solid #E5E6E8;border-radius: 24rpx;">
						<image style="width: 36rpx;height: 36rpx;margin: 16rpx 16rpx 4rpx;" src="/static/images/icon/left-icon.png"></image>
					</view>
				</view>
				<view style="margin-left: 32rpx;">
					<u-input
						:placeholder="placeholder"
						prefixIcon="search"
						prefixIconStyle="font-size: 40rpx;color: #909399"
						shape="circle"
						style="background-color: #fff;padding: 6rpx 18rpx;"
						v-model="keyword"
					></u-input>
				</view>
			</view>
			<view style="color: #232426;font-size: 32rpx;font-weight:400;" @click="searchStreet">
				搜尋
			</view>
		</view>
		<view class="address-list">
			<view v-if="addressList.length > 0">
				<view v-for="(item,index) in addressList" :key="index" class="list-item">
					<view @click="checkAddress(index)">
						<view class="title">{{item.name}}</view> 
						<view class="subtitle">{{item.formatted_address}}</view>
					</view>
				</view>
			</view>
			<view v-else>
				<u-empty
				        marginTop="150"
						mode="search"
						text="沒找到街道"
						iconSize="200"
						textSize="30"
				>
				</u-empty>
			</view>
		</view>
		
	</view>
</template>

<script>
	
	import { googleAddress } from '@/config/api.js';
	
	export default {
		data() {
			return {
				keyword:'',
				addressList:[],
				placeholder:'請輸入街道並點擊搜尋',
				from:{
					country:'',
					city:'',
					district:'',
					street:''
				}
			}
		},
		onLoad(option) {
			let that = this;
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('initData', (data) => {
			  console.log('接收到的数据:', data); 
			  // 这里可以处理数据，如赋值给data或更新UI
			  // that.placeholder = data.placeholder;//提示信息
			  that.from.country = data.country;
			  that.from.city = data.city;
			});
		},
		methods: {
			goBack(){
				uni.navigateBack();
			},
			getGps(){
				let that = this;
				uni.getLocation({
					type: 'wgs84',
					success: function (res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						that.longitude = res.longitude;
						that.latitude = res.latitude;
					}
				});
			},
			searchStreet(){
				if( this.keyword.length == 0 ){
					uni.showToast({
						icon:'none',
						title:'請輸入檢索信息'
					})
					return;
				}
				uni.showLoading({
					title: '搜尋中'
				})
				let that = this;
				let data = {
					keyword:that.from.country + that.from.city + that.keyword
				}
				googleAddress(data).then((res) => {
					console.log('sucess', res)
					//success
					that.addressList = res.results
					// that.addList.push()
					uni.hideLoading();
				}).catch((e) =>{
					console.log('error', e)
					uni.hideLoading();
				})
			},
			checkAddress(index){
				const street = this.addressList[index].formatted_address
				const latitude = this.addressList[index].geometry.location.lat;
				const longitude = this.addressList[index].geometry.location.lng;
				
				const eventChannel = this.getOpenerEventChannel();
				eventChannel.emit('acceptData', { street:street,latitude:latitude,longitude:longitude });// 发送数据
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		
		.address-list{
			margin-top: 50rpx;
			padding:0 36rpx;
			
			.list-item{
				margin-top: 20rpx;
				.title{
					color: #333;
					font-weight: 500;
					font-size: 28rpx;
				}
				.subtitle{
					color: rgb(129,129,129);
					border-bottom: 2rpx solid #e9e7e7;
					padding-bottom:20rpx;
					font-size: 24rpx;
				}
			}
		}
	}
	
</style>
